<template>
  <view class="boox">
    <view class="cont">
      <!-- 图片 -->
      <view class="img">
        <image :src="imageurl" alt="" />
        <view class="till">
          今日疯抢
        </view>
      </view>
      <view class="right">
        <!-- 名称 -->
        <view class="title1" style="font-weight: bolder;padding: 5rpx;">
          {{title1}}
        </view>
        <!-- 物品介绍 -->
        <view class="title2" style="color: rgba(132, 132, 132, 0.3);padding: 10rpx;">
          {{title2}}|{{title3}}|{{title4}}
        </view>
        <!-- 券 -->
        <view class="quan" style="padding: 10rpx;">
          <view class="s-tit" style="color: #f1ad7e;border:2px solid #f1ad7e;font-size: 20rpx; width: 90rpx;height: 35rpx; text-align: center;align-items: center; 
        	margin-right: 10rpx;border-radius: 5rpx;">
            {{title5}}
          </view>
          <view class="l-tit"
            style="border:2px solid #4fbf7b;font-size: 20rpx; width: 130rpx;height: 35rpx; text-align: center;align-items: center;display: flex;padding-left:-5rpx;border-radius: 5rpx;">
            <view style="width: 50rpx; background-color: #4fbf7b; color: white;margin-left: -2px; ">{{title9}}
            </view>
            <view style="padding-left: 10rpx; color: #4fbf7b;">{{title8}}</view>
          </view>
        </view>
        <!-- 价钱 -->
        <view class="foot">
          <view class="left">
            <view class="price">
              <text style="color: #f1ad7e;font-weight: bolder;font-size: 25rpx;">￥{{title6}}</text><text
                style="color: rgba(132, 132, 132, 0.3);">/{{title7}}</text>
            </view>
            <view class="btn">
              <button class="btn">+</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      imageurl: String,
      title1: String,
      title2: String,
      title3: String,
      title4: String,
      title5: String,
      title9: String,
      title6: String,
      title7: String,
      title8: String
    },
    data() {
      return {

      }
    },
    methods: {

    },
    onLoad() {
      console.log(this.imageurl);

    }
  }
</script>

<style lang="scss" scoped>
  .cont {
    width: 100%;
    background-color: white;
    border-radius: 10%;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 5px 10px rgba(132, 132, 132, 0.8);

    .img {
      width: 50%;
      position: relative;


      image {
        width: 100%;
        height: 200rpx;
        border-radius: 10%;
      }

      .till {
        width: 150rpx;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        font-size: 25rpx;
        font-weight: bolder;
        color: white;
        border-top-left-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
        background-color: #e9a277;
        position: absolute;
        top: 0rpx;
      }
    }

    .title1 {
      font-weight: bolder;
      font-size: 30rpx;
    }

    .title2 {
      width: 100%;
      font-size: 21rpx;
    }

    .quan {
      display: flex;
    }

    .foot {
      .left {
        padding: 10rpx;
        display: flex;
        justify-content: space-between;

        .btn {
          margin-right: 20rpx;

          .btn {
            width: 50rpx;
            height: 50rpx;
            padding-left: 12rpx;
            color: white;
            line-height: 50rpx;
            background: linear-gradient(to bottom right, green, white);
            border-radius: 50%;
          }
        }
      }
    }
  }
</style>